<template>
  <div id="data-view">
    <dv-full-screen-container>
      <Top-Header :title="title" />
      <!-- <component :is="route" /> -->
      <template v-if="route === 'index'">
        <firstPage/>
      </template>
      <template v-else>
        <twoPage/>
      </template>
      
    </dv-full-screen-container>
  </div>
</template>

<script>
import TopHeader from "./TopHeader";
import firstPage from "./firstPage";
import twoPage from "./twoPage";
export default {
  name: "DataView",
  components: {
    TopHeader,
    firstPage,
    twoPage
  },
  data() {
    return {
      route: "index",
      // route: "firstPage",
      title: "大屏幕数据"
    }
  },
  mounted() {
    console.log('indexx',location.hash);
    if (location.hash) {
      this.route = location.hash;
    }
    // if(location.hash) this.route = (location.hash == '#twoPage') ? 'twoPage' : 'firstPage'
  },
  methods: {},
};
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("./img/bg.png");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  // .main-content {
  //   height: calc(~"100% - 80px");
  //   margin-top: 20px;

  //   .border-box-content {
  //     padding: 20px;
  //     box-sizing: border-box;
  //     display: flex;
  //     flex-direction: column;
  //   }
  // }
  // .mct-container {
  //   height: 60%;
  //   display: flex;
  //   flex: 1;
  //   padding-bottom: 20px;
  //   box-sizing: border-box;
  // }
  // .mcb-container {
  //   height: 40%;
  //   display: flex;
  // }

  // .mctc-left,
  // .mctc-right {
  //   width: 50%;
  // }
}
</style>